<template>
    <div id="add_goods_allocation">
        <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose">
            <div slot="title">
                <span>调拨单</span>
                <span style="font-size: 14px; color: #ff7068">{{ '（单号：' + allocationInfo.transferOrderId + '、调出-调入门店：' + allocationInfo.senderStore + '-' + allocationInfo.receiverStore + '、创建时间：' + allocationInfo.gmtApply + '）'}}</span>
            </div>
            <!-- <el-form  label-width="80" style="background: #eee; border-radius: 4px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="调拨单号:">
                            <div class="grid-content">
                                {{allocationInfo.transferOrderId}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        
                        <el-form-item label="调出门店:">
                            <div class="grid-content">
                                {{allocationInfo.senderStore}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="调入门店:">
                            <div class="grid-content">
                                {{allocationInfo.receiverStore}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请时间:">
                            <el-tooltip class="item" effect="dark" :content="allocationInfo.gmtApply" placement="top-start">
                                <div class="grid-content">
                                    {{allocationInfo.gmtApply}}
                                </div>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
            </el-form> -->
            <el-button style="margin-bottom: 10px; " size="small" type="primary" @click="isShowAddGoods= true">添加商品</el-button>
            <el-table stripe :data="tableData" @cell-click="handleClickCell" border >
                <el-table-column label="品牌" prop="brandName" show-overflow-tooltip></el-table-column>
                <el-table-column label="SPU编码" prop="spuCode" show-overflow-tooltip></el-table-column>
                <el-table-column label="SKU编码" prop="skuCode" width="150" ></el-table-column>
                <el-table-column label="规格" prop="specName" show-overflow-tooltip></el-table-column>
                <el-table-column label="可用库存" prop="stockQty"></el-table-column>
                <el-table-column label="调拨数量" width="80" prop="applyQty">
                    <template slot-scope="scope">
                        
                        <el-input v-show="scope.row.type== 'input'" class="num-input" :ref="'inputRef' + scope.row.skuCode" size="mini"  v-model="scope.row.applyQty" clearable  @change="handleCellInputBlur(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleDelGoods(scope.row.transferDetailId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
         
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleSaveAllocation">返回</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">提 交</el-button>
            </span>
        </el-dialog>
        
        <addAllocationGoodsTpl v-if="isShowAddGoods" :isShowAddGoods='isShowAddGoods' :checkedGoods="checkedGoods" :titles='allocationInfo' :transferId="transferId" @cancelAddAllocationGoods="cancelAddAllocationGoods" @getAllocationsDetails="getAllocationsDetails"></addAllocationGoodsTpl>
    </div>
</template>
<script>
    import addAllocationGoodsTpl from './addAllocationGoodsTpl'
    import page from '../../../commonComponents/page'
    export default {
        props: ['isShow', 'transferId', 'title', 'allocationInfo'],
        components: {addAllocationGoodsTpl, page},
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow;
                },
                set() {}
            },
            titles: {
                get() {
                    if(this.title) {
                        return this.title
                    }
                },
                set() {}
            }
        },
        data() {
            return {
                autofocus: true,
                page: 1,
                size: 10,
                total: 0,
                tableData: [],
                isShowAddGoods: false,
                checkedGoods: []
            }
        },
        mounted() {
            if(this.transferId) {
                this.getAllocationsDetails()
            }
        },
        methods: {
            /** 获取调拨任务详情 */
            getAllocationsDetails() {
                try{
                    let params= {
                        page: this.page,
                        size: this.size
                    }
                    this.$server.stockControlApi.editAllocationDetails(this.transferId, {page: this.page, size: this.size}).then(res => {
                        res.data.forEach(item => {
                            item.type= 'input'
                            if(this.checkedGoods.indexOf(item.skuCode) == -1) {
                                this.checkedGoods.push(item.skuCode)
                            }
                        })
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err) {
                    this.$paramsError(err)
                }
            },
            handlePageChange(page) {
                this.page= page
                this.getAllocationsDetails()
            },
            handleSizeChange(size) {
                this.size= size
                this.getAllocationsDetails()
            },
            /**删除调拨任务商品 */
            handleDelGoods(id) {
                try {
                    this.$confirm('确定删除该商品？').then(_ => {
                        this.$server.stockControlApi.delAllocationGoods(id).then(res => {
                            this.getAllocationsDetails()
                        })
                    }).catch()
                } catch(err) {
                    this.$paramsError(err)
                }
            },
            /** */
            handleClickCell(row, column, cell, event) {
                if(column.property == 'applyQty') {
                    row.type="input"
                    this.$nextTick(() => {
                        let id = 'inputRef'+row.skuCode;
                        this.$refs[id].focus()
                    })
                }
                
            },
            handleCellInputBlur(scope) {
                try{
                    if(/^[1-9]\d*|0$/.test(+scope.applyQty)) {
                        if(scope.applyQty > scope.stockQty) {
                            this.$confirm('申请数量超出库存数量').then(_ => {
                                scope.applyQty= ''
                            }).catch(err => {
                                scope.applyQty= ''
                            })
                        }else{
                            if(scope.applyQty <1) {
                                this.$confirm('商品数量不能为0')
                            }else {
                            let params= {
                                    applyQty: +scope.applyQty,
                                    skuCode: scope.skuCode,
                                    transferDetailId: scope.transferDetailId
                                }
                                this.$server.stockControlApi.modifyAllocationGoodsNum(params).then(res => {
                                    this.getAllocationsDetails()
                                })
                            }
                        }       
                    }else{
                        this.$confirm('申请数量为非负整数').then(_ => {
                            scope.applyQty= ''
                        }).catch(err => {
                            scope.applyQty= ''
                        })
                    }
                }catch(err){this.$paramsError(err)}
            },
            handleSaveAllocation() {
                this.$emit('cancelAddAllocationGoods', false)
            },
            handleSubmit() {
                try{
                    this.$server.stockControlApi.allocationSubmit(this.transferId).then(res => {
                        this.$emit('cancelAddAllocationGoods', false)
                        this.$emit('getAllocationList')
                    })
                }catch(err){this.$paramsError(err)}
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelAddAllocationGoods', false)
                    this.$emit('getAllocationList')
                }).catch(_ => {});
            },
            cancelAddAllocationGoods(title) {
                this.isShowAddGoods= title
            }
        }
    }
</script>
<style lang="less" scoped>
    
</style>